<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>-->
    <!--<link rel="stylesheet/less" type="text/css" href="less.less" />-->
    <!--<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script>
        function browserRedirect() {
            var sUserAgent = navigator.userAgent.toLowerCase()
            var bIsIpad = sUserAgent.match(/ipad/i) === 'ipad'
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) === 'iphone os'
            var bIsMidp = sUserAgent.match(/midp/i) === 'midp'
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) === 'rv:1.2.3.4'
            var bIsUc = sUserAgent.match(/ucweb/i) === 'ucweb'
            var bIsAndroid = sUserAgent.match(/android/i) === 'android'
            var bIsCE = sUserAgent.match(/windows ce/i) === 'windows ce'
            var bIsWM = sUserAgent.match(/windows mobile/i) === 'windows mobile'
            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                return 'phone'
            } else {
                return 'pc'
            }
        }
        setRem()
        window.addEventListener('orientationchange', setRem)
        window.addEventListener('resize', setRem)
        window.addEventListener('resize', setRem)
        function setRem() {
            var html = document.querySelector('html')
            var app = document.getElementById("app");
            var iframe = document.getElementById("iframe");
            if (browserRedirect() === 'pc') {
                if (window.screen.width > 1360) {
                    html.fontSize = 750 / 100 + "px"
                }
            }

        }
    </script>
</head>

<body>
    <style>
        .flex-box {
            display: flex;
            flex-wrap: wrap;
        }

        .flex-ibox {
            display: inline-flex;
            flex-wrap: wrap;
            vertical-align: top;
        }

        /**--row--***/
        .flex-ibox--row-tl,
        .flex-box--row-tl {
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
            align-content: flex-start;
        }

        .flex-ibox--row-tc,
        .flex-box--row-tc {
            flex-direction: row;
            justify-content: center;
            align-items: flex-start;
            align-content: flex-start;
        }

        .flex-ibox--row-tr,
        .flex-box--row-tr {
            flex-direction: row;
            justify-content: flex-end;
            align-items: flex-start;
            align-content: flex-start;
        }

        .flex-ibox--row-cl,
        .flex-box--row-cl {
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            align-content: center;
        }

        .flex-ibox--row-cc,
        .flex-box--row-cc {
            flex-direction: row;
            justify-content: center;
            align-items: center;
            align-content: center;
        }

        .flex-ibox--row-cr,
        .flex-box--row-cr {
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
            align-content: center;
        }

        .flex-ibox--row-bl,
        .flex-box--row-bl {
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-end;
            align-content: flex-end;
        }

        .flex-ibox--row-bc,
        .flex-box--row-bc {
            flex-direction: row;
            justify-content: center;
            align-items: flex-end;
            align-content: flex-end;
        }

        .flex-ibox--row-br,
        .flex-box--row-br {
            flex-direction: row;
            justify-content: flex-end;
            align-items: flex-end;
            align-content: flex-end;
        }

        .flex-ibox--row-tsb,
        .flex-box--row-tsb {
            flex-direction: row;
            justify-content: space-between;
            align-items: inherit;
            align-content: flex-start;
        }

        .flex-ibox--row-csb,
        .flex-box--row-csb {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            align-content: center;
        }

        .flex-ibox--row-bsb,
        .flex-box--row-bsb {
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-end;
            align-content: flex-end;
        }

        .flex-ibox--row-tsa,
        .flex-box--row-tsa {
            flex-direction: row;
            justify-content: space-around;
            align-items: inherit;
            align-content: flex-start;
        }

        .flex-ibox--row-csa,
        .flex-box--row-csa {
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            align-content: center;
        }

        .flex-ibox--row-bsa,
        .flex-box--row-bsa {
            flex-direction: row;
            justify-content: space-around;
            align-items: flex-end;
            align-content: flex-end;
        }


        /**--column--***/


        /**--- nowrap --***/
        [class*="flex-box--"].flex-box--nowrap,
        [class*="flex-ibox--"].flex-ibox--nowrap {
            flex-wrap: nowrap;
        }

        /**--- reverse --***/
        [class*="flex-box--"].flex-box--reverse,
        [class*="flex-ibox--"].flex-ibox--reverse {
            flex-direction: row-reverse;
        }

        /**--- baseline --***/
        [class*="flex-box--"].flex-box--baseline,
        [class*="flex-ibox--"].flex-ibox--baseline {
            align-items: baseline;

        }


        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            position: relative;
            font-size: 28px;
            background: #000000;
        }

        @media screen and (min-width: 1200px) {
            #app {
                width: 750px;
            }
        }

        .show-time-box {
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
        }

        #showTime {
            text-align: center;
            font-size: 300px;
            color: #ffae28;

        }

        @media screen and (max-width: 750px) {
            #showTime {
                text-align: center;
                font-size: 70px;
                color: #ffae28;
                margin-top: -150px;
            }
        }

        #showTime>li {
            float: left;
            list-style: none;
            margin-right: 0.2rem;
        }



        input {
            width: 50px;
            height: 40px;
            border: 0;
            outline: 0;
            margin: 0 10px;
            text-align: center;
            font-size: 20px;

            border-radius: 3px;
        }

        .btn-list {
            padding:0 20px;
        }

        .btn {

            display: inline-block;
            background: #ffae28;
            color: #000;
            cursor: pointer;
            border-radius: 3px;
            font-size: 20px;
            padding: 6px 12px;
            margin: 0 3px;
            -moz-user-select: none;
            -ms-user-select: none;
            -webkit-user-select: none;
            user-select: none;
            text-align: center;

        }

        .ctrl-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            color: #ffae28;
        }

        @media screen and (max-width: 750px) {
            .ctrl-container {}

            .btn-list {
                width: 100%;
            }

            .btn {
                display: block;
                margin: 20px 0px;
            }
        }

        .model-box {
            display: none;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        .model-dialog {
            position: relative;
            width: 400px;
            height: 300px;
            background: #fbfff2;
            border-radius: 3px;
            z-index: 99999;
            color: #222;
            font-size: 50px;
        }

        .model-dialog .model-btns {
            position: absolute;
            top: -50px;
            right: -32px;
            cursor: pointer;
        }

        @media screen and (max-width: 750px) {
            .model-dialog {
                width: 80%;
                height: 300px;
            }
        }
    </style>
    <div class=" model-box flex-box flex-box--row-cc" id="model">
        <div class="model-dialog flex-box flex-box--row-cc ">
            <div class="model-btns">
                <div class="btn-close">
                    <svg t="1605259763327" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="8514" width="22" height="22">
                        <path
                            d="M519.98750027 460.33437527L181.925 122.271875a42.1875 42.1875 0 1 0-59.68124973 59.62500027l338.06249946 338.090625-338.06249946 338.090625a42.1875 42.1875 0 1 0 59.653125 59.653125l338.090625-338.06250027 338.090625 338.06250027a42.1875 42.1875 0 1 0 59.653125-59.62500027l-338.06250027-338.11874973 338.06250027-338.06250027a42.1875 42.1875 0 1 0-59.653125-59.653125l-338.06250027 338.06250027z"
                            fill="#ffffff" p-id="8515"></path>
                    </svg>
                </div>
            </div>
            <div class="model-content">
            </div>
        </div>
    </div>

    <div class="show-time-box flex-box flex-box--row-cc">
        <ul id="showTime" class=""></ul>
    </div>

    <div class="ctrl-container  flex-box flex-box--row-bc">
        <div class=" flex-box flex-box--row-tc" style="width:100%;padding-bottom:50px;">
            <input type="text" min="0" id="input-min">分
            <input type="text" min="0" max="59" id="input-sec" />秒
            <div class="btn-list">
                <div id="btn-start" class="btn">开始</div>
                <div id="btn-stop" class="btn">暂停</div>
                <div id="btn-set" class="btn">设置</div>
            </div>
        </div>
    </div>
   <script src="index.js"></script>
</body>

</html>